<template>
  <div class="son">
    mySonCom2子组件
    <h1>组合式API下的子传父</h1>
    <h3>基本思想</h3>

    <div>1.父组件中给子组件标签通过@绑定事件</div>
    <div>2.子组件内部通过$emit方法触发事件</div>
    <div>{{ name }}</div>
    <button @click="sonMsg">触发自定义事件</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
// 2.通过defineEmits() => emit(this.$emit)
const name = ref("nihao");
const setName = () => {
  name.value = "赵姬";
};
// 向父组件暴露 name，setName
defineExpose({
  name,
  setName,
});
const emit = defineEmits(["getMsg"]);
const sonMsg = () => {
  emit("getMsg", "this is son msg");
};
</script>
<style lang="css" scoped>
.son {
  text-align: left;
  border: 2px solid green;
  width: 600px;
  height: 500px;
  background-color: pink;
}
</style>
